<template>
    <div class="payrulebox">
        <p>Please set the CPC payment reward rules for advertising space</p>
        <div class="setInput">
            <input type="number" v-model="adUvPrice" placeholder="Daily reward for each UV click"/>
            <span>CXT</span>
        </div>
        
        <div class="btn">
            <my-button text='confirm' @click="doset"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import { toast } from '@/utils/common'
export default {
    components:{
       myButton
    },
    props:{
        ruleDetail:{
            type:Object,
            default:()=>{}
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            adUvPrice:'',
            arLandmarkId:''
        })

        onMounted(()=>{
            state.arLandmarkId = route.query.arlandmarkid
            if(props.ruleDetail.adUvPrice){
                state.adUvPrice = props.ruleDetail.adUvPrice.num
            }
        })

        const doset = async()=>{
            if(!state.adUvPrice){
                return toast('Please enter the reward for each UV Click')
            }
            const res = await store.dispatch('ad/set_ads_cpc',{
                adUvPrice:state.adUvPrice.toString(),
                arLandmarkId:parseInt(state.arLandmarkId)
            })
            if(res.success){
                toast('Setting succeeded')
                setTimeout(()=>{context.emit('close')},1000)
                
            }else{
                toast(res.message)
            }
        }

        return{
            ...toRefs(state),
            doset
        }
    }
}
</script>

<style lang="scss" scoped>
    .payrulebox{
        padding:60px 40px 40px 40px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #FFFFFF;
        p{
            font-size: 30px;
            line-height: normal;
            background-clip: text;
            -webkit-background-clip: text;
           // -webkit-text-fill-color: transparent;
           padding: 20px 0 80px 0;
        }
        .btn{
            width: 300px;
            margin: 100px auto 60px auto;
        }
        .setInput{
            display: flex;
            height: 80px;
            line-height: 80px;
            width: 100%;
            background: rgba(103,248,255,0.2000);
            border-radius: 0px 0px 0px 0px;
            border: 1px solid rgba(103,248,255,0.5000);
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 28px;
            input{
                flex: 1;
                border: 0;
                padding: 0 20px;
                background: none;
                line-height: 80px;
                color: #B3D8EB;
            }
            span{
                padding: 0 20px;
                height: 100%;
            }
        }
    }
</style>